//轮播图
Vue.component('Swiper', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'paddingLeft':Left,'paddingRight':Right,'marginTop':Top,'marginBottom':Bottom,'border':layerBorder,width}" >
    <el-carousel style="overflow:hidden;" :style="{'borderRadius':Radius}" :interval="interval" :type="data.type" 
        :height="height" :arrow="data.arrow" :direction="data.direction" :trigger="data.trigger">
        <el-carousel-item  v-for="(item,index) in data.Children.image" :key="index">
            <el-image style="width: 100%;height: 100%;" :src="item.src" :fit="item.fit"></el-image>
        </el-carousel-item>
    </el-carousel>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
    computed: {
        interval() {
            return this.data.times * 1000
        }
    },
})
// 轮播图配置
Vue.component('SwiperConfig', {
    template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">轮播图组件</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="切换箭头显示">
            <el-select filterable v-model="data.arrow" placeholder="请选择">
                <el-option v-for="(item,index) in arrow" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="轮播间隔（秒）">
            <el-input-number v-model="data.times" :min="1" placeholder="请输入轮播秒数"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="组件类型">
            <el-radio v-model="data.type" label="">正常</el-radio>
            <el-radio v-model="data.type" label="card">卡片化</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="方向">
            <el-radio v-model="data.direction" label="horizontal">水平</el-radio>
            <el-radio v-model="data.direction" label="vertical">垂直</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="指示器触发">
            <el-radio v-model="data.trigger" label="click">点击指示器</el-radio>
            <el-radio v-model="data.trigger" label="hover">鼠标移入</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="圆角弧度">
            <el-input-number v-model="data.radius" :min="0" placeholder="请输入圆角弧度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="组件宽度">
            <el-input-number v-model="data.width" :min="1" placeholder="请输入组件宽度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="宽度单位">
            <el-select filterable v-model="data.widthUnit" placeholder="请选择宽度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="组件高度">
            <el-input-number v-model="data.height" :min="1" placeholder="请输入组件高度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="高度单位">
            <el-select filterable v-model="data.heightUnit" placeholder="请选择高度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0" placeholder="请输入左边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距单位">
            <el-select filterable v-model="data.leftUnit" placeholder="请选择左边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0" placeholder="请输入右边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距单位">
            <el-select filterable v-model="data.rightUnit" placeholder="请选择右边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0" placeholder="请输入上边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距单位">
            <el-select filterable v-model="data.topUnit" placeholder="请选择上边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0" placeholder="请输入下边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距单位">
            <el-select filterable v-model="data.bottomUnit" placeholder="请选择下边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">轮播图配置</div>
        <div class="operation">
            <el-button :type="isSwitch?'danger':'success'" size="small" @click="()=>{this.isSwitch = !this.isSwitch}">{{isSwitch?'取消':'拖拽'}}</el-button>
        </div>
    </div>
    <div class="swiperImg" style="width:100%">
        <div :id="'config'+id" style="display: flex;flex-wrap: wrap;">
            <div class="preview" :style="{borderColor:isSwitch?'#67C23A':''}" v-for="(item,index) in data.Children.image" :key="index">
                <el-image style="width: 100px; height: 100px;" :src="item.src" :fit="item.fit"></el-image>
                <span v-show="!isSwitch" class="el-upload-list__item-actions">
                    <span style="font-size:24px;" @click="removeimg(item.id)"><i class="el-icon-delete"></i></span>
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            <span style="font-size:24px;color:#fff;"><i class="el-icon-setting"></i></span>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(i,id) in fit" :key="id">
                                <span style="display:block;" :style="{'color':item.fit==i.value?'#67C23A':''}" @click="configimg(i.value,item)">
                                    {{i.label}}{{item.fit==i.value?' (已选)':''}}
                                <span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
                <i v-show="isSwitch" style="position: absolute; right:5px; bottom:5px;color:#67C23A;" class="el-icon-rank"></i>
            </div>
        </div>
        <el-upload class="addview" :show-file-list="false" list-type="picture-card" action=""
            accept="image/*" :before-upload="uploadFront">
            <i slot="default" class="el-icon-plus"></i>
        </el-upload>
    </div>
</el-card>`,
    mixins: [globalConfig, drag],//继承的方法
    data() {
        return {
            arrow: [{
                label: '一直显示',
                value: 'always',
            }, {
                label: '鼠标移入',
                value: 'hover',
            }, {
                label: '一直隐藏',
                value: 'never',
            }],
        }
    },
    methods: {
        uploadFront(file) {//添加图片
            let _this = this
            const formData = new FormData();
            formData.append('file', file, file.name);
            let oFileReader = new FileReader();
            oFileReader.readAsDataURL(file);
            oFileReader.onload = function (e) {
                _this.data.Children.image.push({
                    id: _this.data.Children.image.length + 1,
                    src: e.target.result,
                    fit: 'contain',
                })
            }
        },
        removeimg(id) {//删除图片
            this.data.Children.image = this.data.Children.image.filter(i => i.id != id)
        },
        configimg(value, item) {
            item.fit = value
        },
    },
    mounted() {
        this.sortable(this, '#config' + this.id, '.preview', this.data);
    }
})